<template>
  <div>
    <div>
      <!-- 卡片 -->
      <el-card class="box-card">
        <el-table :data="roledata" style="width: 100%" border>
          <el-table-column prop="id" label="id" />
          <el-table-column prop="jobName" label="角色名称" />
          <el-table-column prop="job" label="工作描述" />
          <el-table-column label="职级">
            <template slot-scope="scope">
              <el-tag
                :class="
                  scope.row.rank == 'one'
                    ? 'green'
                    : scope.row.rank == 'two'
                    ? 'blue'
                    : scope.row.rank == 'three'
                    ? 'origin'
                    : ''
                "
              >
                {{
                  scope.row.rank == "one"
                    ? "一级"
                    : scope.row.rank == "two"
                    ? "二级"
                    : scope.row.rank == "three"
                    ? "三级"
                    : ""
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="showedit(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 修改角色 -->
        <el-dialog
          title="修改角色"
          :visible.sync="editdialogVisible"
          width="40%"
        >
          <el-form :model="editrole" label-width="80px">
            <el-form-item label="角色名称" prop="jobName">
              <el-input v-model="editrole.jobName" />
            </el-form-item>
            <el-form-item label="工作职责" prop="job">
              <el-input v-model="editrole.job" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateroleok">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRoles, updateRole, getRoutes } from "../../api/role";

export default {
  data() {
    return {
      roledata: [],
      selectedRoleId: "",
      options: [],
      // 修改
      editdialogVisible: false,
      editroleId: -1,
      editrole: { jobName: "123", job: "", peopleNum: "" },
    };
  },
  created() {
    this.getrolelist();
  },
  methods: {
    async getrolelist() {
      var res = await getRoles();
      console.log(res, "角色列表");
      this.roledata = res.list;
      // this.total = res.data.data.total
    },
    // 修改
    showedit(item) {
      this.editdialogVisible = true;
      this.editrole = item;
      this.editroleId = item.id;
    },
    async updateroleok() {
      console.log(this.editrole);
      const res = await updateRole(this.editrole);
      if (res.code == 200) {
        this.$message.success("角色信息修改成功");
        this.getrolelist();
        this.editdialogVisible = false;
      } else {
        this.$message.error("角色信息修改失败");
      }
    },
  },
};
</script>

<style scoped>
.box-card {
  padding: 20px;
}

.el-table {
  max-width: 80%;
  min-width: 50%;
  margin: 0 auto;
}

/* .el-tag {
  margin: 10px;
} */
.green {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
.blue {
  background-color: #ecf5ff;
  color: #409eff;
}
.origin {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
</style>